<template>
  <CodeEditor v-model="code" :options="{ readOnly: true }" />
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";

import useEditorStore from "@/store/modules/editor";
import { useCompileCode } from "@/components/CodeEditor/hooks";

defineOptions({
  name: "Code",
});

const editorStore = useEditorStore();
const { compileCode } = useCompileCode();

const code = ref("");

const handleCompileCode = async () => {
  code.value = await compileCode(editorStore.currentComponent);
};
onMounted(handleCompileCode); // 初始化渲染
watch(() => editorStore.currentComponent, handleCompileCode); // 当数据发生变化时，也需要重新渲染
</script>

<style scoped lang="scss"></style>
